<template>
  <div class="choose_area column_c">
    <div class="choose_head">
      <img :src="require('@/assets/images/choose_h.jpg')">
    </div>
    <div class="choose_area">
      <h2>选择区域</h2>
      <span>为保证安全1米5以下禁止进场</span>
    </div>
    <ul id="c_area">
      <li v-for="(item, index) of list" :key="index" @click="handleClick(item, index)" :class="curId == index ? 'activated column_cc' : 'column_cc'">
        <div>{{item.value + '区'}}</div>
        <div class="area_text">{{item.text}}</div>
      </li>
    </ul>
    <div class="ticket_state">
      <p>余票充足</p>
      <p>余票紧张</p>
      <p>票已售完</p>
    </div>
    <h2 class="zw_area">座位示意图</h2>
    <div class="zw_img">
      <img ref="zw_image" id="zw_image" :src="require('@/assets/images/seat_region.jpg')" @click="previewImg" usemap="#planetmap">
      <map name="planetmap" ref="map_image" id="planetmap">
        <area v-for="(item, index) of mapList" @click="handleClick(item, index)" :key="index" shape="polygon" :coords='item.region_area' />
      </map>
    </div>
    <van-dialog
      v-model="show"
      title="为保证购票的公正严谨，请输入卡号验证身份"
      @confirm="confirmCard"
    >
      <van-field label="卡号" v-model="card_num" placeholder="请输入卡号" />
    </van-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import { Dialog, Field, Toast } from 'vant'
import { list, mapList } from '@/assets/jsonData.js'
export default {
  name: 'ChooseArea',
  components: {
    [Dialog.name]: Dialog,
    [Field.name]: Field,
    [Toast.name]: Toast
  },
  data () {
    return {
      list: list,
      isActivated: false,
      curId: null,
      imgW: null,
      imgH: null,
      imgBl: null,
      show: true,
      card_num: '',
      buy_limit: null,
      mapList: mapList
    }
  },
  computed: {
  },
  methods: {
    loadData () {
    },
    handleClick: function (item, index) {
      if (this.buy_limit === 1) {
        this.curId = index
        localStorage.setItem('zwRegion', this.curId)
        this.$router.push({
          name: 'HallSeat',
          params: {
            HallN: item.value
          }
        })
      } else if (index > 0 && this.buy_limit === 2) {
        this.curId = index
        localStorage.setItem('zwRegion', this.curId)
        this.$router.push({
          name: 'HallSeat',
          params: {
            HallN: item.value
          }
        })
      } else if (this.buy_limit === 0) {
        Toast('非会员不可购买')
      } else if (index === 0 && this.buy_limit === 2) {
        Toast('非VIP不可购买')
      }
    },
    confirmCard () {
      this.$axios.get('http://hytest.xihabang.com/api/ticket_api.php?do=check_vip', {
        params: {
          hykh: this.card_num
        }
      })
        .then((res) => {
          console.log(res)
          localStorage.setItem('hykh', this.card_num)
          this.buy_limit = res.data.status
          let vstatus = res.data.status
          localStorage.setItem('yn_member', vstatus)
          if (vstatus === 1) {
            console.log('vip')
          } else if (vstatus === 2) {
            console.log('非vip')
          } else {
            this.show = true
            console.log('不可购买')
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.show = false
    },
    callPreview: function () {
      if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
          if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
          }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
            document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
          }
        }else{
          vm.onBridgeReady(data);
        }
    },
    previewImg () {
      WeixinJSBridge.invoke("imagePreview", {
        "urls": '@/assets/images/seat_region.jpg',
        "current": ['http://www.xihabang.com/wangyu/img/img_big.jpg']
      })
    }
  },
  created () {
    this.oqqq = {
        "appId": "appId",
        "nonceStr": "nonceStr",
        "package": "package",
        "signType": "signType",
        "timeStamp": "timeStamp",
        "paySign": "paySign"
    }
  },
  mounted () {
    this.curId = localStorage.getItem('zwRegion')
    const imgBlock = this.$refs['zw_image']
    const mapBlock = this.$refs['map_image']
    var adjustPosition = function (position) {
      const phoneW = 345
      let imgW = imgBlock.offsetHeight
      let imgBl = imgW / phoneW
      var each = position.split(',')
      each.forEach((item, index) => {
        each[index] = Math.round(item * imgBl)
      })
      var newPosition = ''
      each.forEach((item, index) => {
        newPosition += item + ','
      })
      return newPosition
    }
    var startResize = function () {
      var childN = mapBlock.childNodes
      let childL = childN.length / 2
      for (var i = -1; i < childL - 1; i++) {
        var item = 2 * i + 2
        var oldCoords = childN[item].coords
        var newCoords = adjustPosition(oldCoords)
        childN[item].setAttribute('coords', newCoords)
      }
    }
    window.onresize = function () {
      var target = this
      if (target.resizeFlag) {
        clearTimeout(target.resizeFlag)
      }
      target.resizeFlag = setTimeout(function () {
        startResize()
        target.resizeFlag = null
      }, 200)
    }
    startResize()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.choose_area{
    width: 100%;
    .choose_head{
        width: 10rem;
        height: 5.6rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .choose_area{
        width: 9.466667rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 0.346667rem;
        h2{
            font-size: 0.453333rem;
            line-height: 0.453333rem;
            color: #4B4B4B;
            letter-spacing: 0.106667rem;
            font-weight: bold;
            margin-right: 0.133333rem;
        }
        span{
            color: #B1B1B1;
            font-size: 0.293333rem;
        }
    }
    .activated{
        color: #E39730;
        border-color: #E39730!important;
    }
    #c_area{
        width: 9.733333rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0.36rem;
        padding-left: 0.133333rem;
        li{
            width: 2.8rem;
            height: 1.066667rem;
            font-size: 0.4rem;
            letter-spacing: 0.093333rem;
            border: 0.016rem solid #E3E3E3;
            border-radius: 0.106667rem;
            text-align: center;
            margin-right: 0.4rem;
            margin-bottom: 0.4rem;
            &:nth-child(3){
              margin-right: 0;
            }
            .area_text{
              font-size: .2rem;
              margin-top: 0.05rem;
              letter-spacing: 0.01rem;
            }
        }
    }
    .ticket_state{
        width: 7.2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        p{
            font-size: 0.346667rem;
            line-height: 0.493333rem;
            letter-spacing: 0.08rem;
            &:nth-child(1){
                color: #242424;
            }
            &:nth-child(2){
                color: #FF4030;;
            }
            &:nth-child(3){
                color: #CACACA;
            }
        }
    }
    .zw_area{
        width: 9.466667rem;
        font-size: 0.453333rem;
        line-height: 0.453333rem;
        color: #4B4B4B;
        letter-spacing: 0.106667rem;
        font-weight: bold;
        margin-right: 0.133333rem;
        margin-top: 0.533333rem;
        margin-bottom: 0.533333rem;
    }
    .zw_img{
        width: 9.2rem;
        height: 9.2rem;
        border: 0.08rem solid #b48239;
        margin-bottom: 0.88rem;
    }
}
</style>
